import { PageContainer } from '@ant-design/pro-layout';
import { Card } from 'antd';
import React, { useState } from 'react';
import Editor from 'for-editor';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import styles from './create.less';

const CreateArticle: React.FC = () => {
  const [editorVal, setEditorVal] = useState<string>();
  const [form] = ProForm.useForm();

  const onChangeEditor = (val: string) => {
    setEditorVal(val);
  };

  return (
    <PageContainer className={styles.createArticle}>
      <Card>
        <ProForm
          form={form}
          layout="horizontal"
          labelCol={{ span: 2 }}
          validateTrigger={['onChange', 'onFocus', 'onBlur']}
          initialValues={{
            roleName: 'user',
          }}
          submitter={{
            // 配置按钮的属性
            resetButtonProps: {
              style: {
                // 隐藏重置按钮
                marginLeft: '50px',
              },
            },
          }}
          onFinish={async (values) => {
            console.log(values);
          }}
          params={{}}
          // request={async () => {
          //   const res = await createUser(100);
          //   return res?.data;
          // }}
        >
          <ProFormText
            className={styles.title}
            width="md"
            name="title"
            hasFeedback
            label="标题"
            placeholder="请输入文章标题"
            validateFirst
            rules={[
              {
                required: true,
                message: '文章标题不能为空',
              },
            ]}
          />
          <ProForm.Item label="内容" name="content">
            <Editor value={editorVal} onChange={onChangeEditor} />
          </ProForm.Item>
        </ProForm>
      </Card>
    </PageContainer>
  );
};

export default CreateArticle;
